<template>
	<view class="login">
		<!-- 页面内容开始 -->
		<view class="content">
			<!-- 头部logo -->
			<image class="logo" src="/static/logo.png"></image>
			<view class="title">
				食品安全与消费纠纷
			</view>
			<view class="subtitle">
				人民调解委员会
			</view>

			<!-- 主体表单 -->
			<block v-if="current == 1">
				<view class="form-input">
					<u-field class="form-input" v-model="form1.username" placeholder="账号/手机号" placeholder-style="color:#e1e1e1;"
						icon="account" icon-color="#e1e1e1" label-width="40" label-align="center" :field-style="fieldStyle"
						:clearable="false" trim />
				</view>
				<view class="form-input">
					<u-field class="form-input" type="password" v-model="form1.password" placeholder="密码" placeholder-style="color:#e1e1e1;"
						icon="lock" icon-color="#e1e1e1" label-width="40" label-align="center" :field-style="fieldStyle"
						:clearable="false" trim />
				</view>

				<view class="login-btn">
					<u-button type="primary" @click="login">登录系统</u-button>
				</view>
			</block>
			
			<!-- 其他登录 -->
			<view v-else class="login-icon-view">
				<!-- #ifdef MP-WEIXIN -->
				<u-button type="success" open-type="getPhoneNumber"
				:custom-style="customStyle"
				@getphonenumber="loginByWeixinPhoneNumber2">手机号快捷登录</u-button>
				<!-- #endif -->
			</view>
			
			<!-- <view class="login-type">
				<view class="block" @click="current=0">
					<text class="text" :class="current==0 ? 'current' : ''">手机号快捷登录</text>
				</view>
				<view class="">|</view>
				<view class="block" @click="current=1">
					<text class="text" :class="current==1 ? 'current' : ''">账号登录</text>
				</view>
			</view> -->
		</view>
		<!-- 页面内容结束 -->
		<!-- #ifndef APP -->
		<view class="" style="padding-top:20px;padding-right:20px; text-align: right;color: #eee;">
			版本号：{{ vk.getVuex('$app.appInfo.appVersion') }}
		</view>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<view class="" style="padding-top:20px;padding-right:20px; text-align: right;color: #eee;">
			APP版本号：{{ vk.getVuex('$app.appInfo.androidVersion') }}
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				current: 0,
				
				// init请求返回的数据
				data: {

				},
				// 表单请求数据
				form1: {
					agreement: true,
					username: '',
					password: '',
				},
				fieldStyle: {
					color: '#e1e1e1',
					fontSize: '16px',
					paddingLeft: '10px',
				},
				
				encryptedKey: "",
				openid: '',
				
				customStyle: {
					// border: "3px solid #fff"
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			vk = uni.vk;
			this.init(options);
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			// #ifdef MP-WEIXIN
			// uni.hideHomeButton();
			// #endif
		},
		// 函数
		methods: {			
			// 页面数据初始化函数
			init(options = {}) {
				// #ifdef MP-WEIXIN
				vk.userCenter.code2SessionWeixin({
					data:{
						appid: vk.getVuex('$app.appInfo.miniProgram.appId'),
						needCache:true
					},
					success: (data) => {
						// console.log('获取微信openid code2SessionWeixin', data)
						this.encryptedKey = data.encryptedKey;
						this.openid = data.openid;
					},
				});
				// #endif
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 使用微信绑定的手机号登录/注册（旧方式）
			loginByWeixinPhoneNumber2(e){
				let that = this;
				let { encryptedData, iv } = e.detail;
				if (!encryptedData || !iv) {
					return false;
				}
				vk.userCenter.loginByWeixinPhoneNumber({
					data: {
						encryptedData,
						iv,
						encryptedKey : that.encryptedKey
					},
					success(data) {
						vk.toast(data.msg);
						setTimeout(() => {
							// 跳转到首页,或页面返回
							that.login_success(data);
						}, 1000);
					}
				});
			},
			// 账号密码登录
			login() {
				let that = this;
				const {
					agreement,
					username,
					password
				} = that.form1;
				// if(!agreement){
				// 	vk.toast('请阅读并同意用户服务及隐私协议',"none");
				// 	return;
				// }
				if (username.length < 4) {
					vk.toast('账号至少4位数', "none");
					return;
				}
				if (!vk.pubfn.checkStr(password, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				// 登录操作
				var form1 = {
					username,
					password
				};
				vk.userCenter.login({
					data: form1,
					//loading:false,
					success: (data) => {
						console.log("登录成功!", data)
						console.log("登录成功!", vk.getVuex("$user.userInfo"));

						if (data.code !== 0) {
							vk.alert(data.errMsg || data.msg)
							return false
						}

						vk.toast("登录成功!");
						setTimeout(() => {
							// 跳转到首页,或页面返回
							that.login_success(data);
						}, 1000);

					},
				});
			},
			login_success(data) {
				let that = this;
				// 检查是否有指定跳转的页面
				if (vk.navigate.originalPage) {
					vk.navigate.originalTo();
					return false;
				}
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();

				if (pages.length > 1 &&
					pages[pages.length - 2] &&
					pages[pages.length - 2].route &&
					pages[pages.length - 2].route.indexOf('login/index') == -1
				) {
					const eventChannel = that.getOpenerEventChannel();
					eventChannel.emit('loginSuccess', {});
					vk.navigateBack();
				} else {
					// 进入首页
					vk.navigateToHome();
				}
			},
		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		background-color: #3F7BAD;

		.content {
			padding-top: 100rpx;
			margin: auto;
			width: 90%;
			color: #fff;
			text-align: center;

			.logo {
				margin-bottom: 30rpx;
				width: 60px;
				height: 60px;
			}

			.title {
				margin-bottom: 10rpx;
				font-size: 24px;
				font-weight: 700;
				letter-spacing: 2px;
			}

			.subtitle {
				margin-bottom: 60rpx;
				font-size: 18px;
				letter-spacing: 10px;
			}

			.form-input {
				margin: 10rpx 0 20rpx;
				color: #fff;
				font-size: 14px;
				border-bottom: #fff 1px solid;
			}
			
			.login-btn {
				margin-top: 80rpx;
			}
		}
	}
	/deep/.form-input .u-icon__icon{
		font-size: 18px !important;
	}
	.login-icon-view{
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
	}
	.login-icon-item{
		width: 120rpx;
	}
	.weixin-login{
		margin-top: -120rpx;
		width: 120rpx;
		height: 120rpx;
		border: none;
	}
	.login-type{
		margin: 40rpx auto 0;
		width: 60vw;
		color: #eee;
		view{
			display: inline-block;
			// text-align: center;
		}
		.block{
			width: 49%;
		}
		.text{
			padding: 10rpx;
			border-bottom-color: transparent;
			transition: color 5s, border-bottom-color 5s;
		}
		.current{
			color: #aaccff;
			border-bottom: 3px solid #aaccff;
			border-bottom-color: #aaccff;
			transition: color 5s, border-bottom-color 5s;
		}
	}
	
	
</style>